<style>
    #upload_vinpic_form div{
        padding: 10px 5px 0 10px;
    }
    .vintips{
        margin-left: 48px;
        color: #808080;
    }


    .vinpics {width: 980px;	height: 500px;overflow: hidden;position:relative;margin:50px auto;}


    #page {
        padding-top:0px;
        padding-bottom:0px;

        width:1000px;
        margin-left: auto;
        margin-right: auto;

        margin-top:0px;
        margin-bottom:-83px;
        /* Fallback for web browsers that doesn't support RGBa */
        background: rgb(255, 255, 255);
        /* RGBa with 0.6 opacity */
        background: rgba(255, 255, 255, 0.7);

        border-right: solid 1px #EBE7E7;
        border-left: solid 1px #EBE7E7;
        min-height: 100%;
    }

    #pluginName{
        float:right;
        margin-right: 10px;
        margin-top:40px;
        color:#E44C26;
        font-size:14px;
        font-family: Arial, Helvetica, sans-serif;
    }

    #pageContent1{
        position:absolute;
        /*padding-top:100px;*/
        padding-left:10px;
        padding-right:10px;
        width:100%;
        overflow:hidden;
    }
    .pageListItem{
        position: absolute;
        width: 1000px;
    }



    #headerContainer{
        width:1000px;
        margin-left: auto;
        margin-right: auto;
    }

    #logo{
        padding-top: 15px;
        padding-left: 10px;
        float: left;
        width: 380px;
    }

    #log{
        background-color: #FFFFFF;
        height: 100px;
        width: 100px;
    }

    #websiteLink{
        color:#EF5F22;
    }
    /**
     * 	plugin css
     */

    #pluginDetails{
        margin-top: 50px;
    }

    #imgContainer{
        width: 980px;
        height: 500px;
    }

    #positionButtonDiv{
        /* Fallback for web browsers that doesn't support RGBa */
        background: rgb(58, 56, 63);
        /* RGBa with 0.6 opacity */
        background: rgba(58, 56, 63, 0.8);
        border: solid 1px #100000;
        color:#FFFFFF;
        padding: 8px;
        text-align: left;
        position:absolute;
        right: 35px;
        top: 10px;
    }

    #positionButtonDiv .positionButtonSpan img{
        float: right;
        border:0;
    }

    .positionMapClass area{
        cursor: pointer;
    }

    .zoomButton{
        border:0;
        cursor: pointer;
    }

    .zoomableContainer {background-image: url("__PUBLIC__/js/smartJQueryZoom-master/example/assets/transparent.png");}


</style>
<div id="add_mes_vin" class="easyui-dialog" style="width: 820px; height: 306px; padding: 10px; overflow: hidden;"
     title="&nbsp;&nbsp;上传车架图"
     data-options="iconCls:'icon-standard-folder-page',buttons:'#dlg-add-mes-vin',closed:true,resizable:true,false:true,closable:true,modal:true">
    <div class="easyui-layout" data-options="fit:true,border:false">
        <div data-options="region:'center',title:'',border:false" style="padding:5px;">
            <form id="upload_vinpic_form"  enctype="multipart/form-data" method="post">
                <div>
                    <label for="">车架号：</label>
                    <input id="uploadcjh" name="cjh" class="easyui-textbox" data-options="prompt:'请确保车架图号正确性！',required:true"
                           style="width:240px">

                    <label for="">版本号：</label>
                    <input id="vinpicversion" name="version" class="easyui-textbox" data-options="required:true,prompt:'例如：A.2'" style="width:80px">



                    <div class="vintips">
                        车架图号自动由MES获取，请确认车架图号正确性！
                    </div>
                </div>


                <div>
                    <label for="">车架图：</label>
                    <input name="url[]"  style="width:400px;" class="easyui-filebox"
                           data-options="buttonText:'上传VIN码打印位置图片',buttonIcon:'icon-standard-application-edit',accept:'image/*',multiple:false,required:true">


                </div>
                <div>
                    <label for="">轴&nbsp;&nbsp;&nbsp;距：</label>
                    <input name="wheelbase" class="easyui-numberbox" data-options="prompt:'必须为数字！',required:true,min:0" style="width:400px">
                </div>
                <div>
                    <label for="">上传说明：</label>
                    <input name="remarks" class="easyui-textbox" data-options="" style="width:400px">
                </div>

            </form>

        </div>
        <div data-options="region:'east',iconCls:'icon-reload',title:'',split:true" style="width:300px;">
            <table id="cjtp-dg"></table>
        </div>

    </div>



</div>
<div id="dlg-add-mes-vin">
    <div class="tool_tip" id="uploadlabel">

    </div>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="uploadvinpic()">上传</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'"
       onclick="javascript:$('#add_mes_vin').dialog('close')">取消</a>
</div>

<div id="add_mes_vinfj" class="easyui-dialog" style="width: 695px; height: 173px; padding: 10px; overflow: hidden;"
     title="&nbsp;&nbsp;上传附件"
     data-options="iconCls:'icon-standard-folder-page',buttons:'#dlg-add-mes-vinfj',closed:true,resizable:true,false:true,closable:true,modal:true">
        <div data-options="region:'center',title:'',border:false" style="padding:5px;">
            <form id="upload_vinpicfj_form"  enctype="multipart/form-data" method="post">
                <div>
                    <label for="">附件：</label>
                    <input name="vinfjs[]"  style="width:600px;" class="easyui-filebox"
                           data-options="buttonText:'上传附件',buttonIcon:'icon-standard-application-edit',accept:'image/*,application/msword,application/pdf,image/vnd.dwg',multiple:false,required:true">
                </div>

            </form>

        </div>
</div>
<div id="dlg-add-mes-vinfj">
    <div class="tool_tip">

    </div>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="uploadvinpicfj()">上传</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'"
       onclick="javascript:$('#add_mes_vinfj').dialog('close')">取消</a>
</div>
<!--下载附件-->
<div id="download_mes_vinfj" class="easyui-dialog" style="width: 695px; height: 173px; padding: 10px; overflow: hidden;"
     title="&nbsp;&nbsp;下载附件"
     data-options="iconCls:'icon-standard-folder-page',buttons:'#dlg-down-mes-vinfj',closed:true,resizable:true,false:true,closable:true,modal:true">
    <div id="downvinfjscontent" data-options="region:'center',title:'',border:false" style="padding:5px;">


    </div>
</div>
<div id="dlg-down-mes-vinfj">
    <div class="tool_tip">

    </div>

    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'"
       onclick="javascript:$('#download_mes_vinfj').dialog('close')">取消</a>
</div>


<div id="showpicvin" class="easyui-dialog" style="width: 1024px; height: 608px; padding: 10px; overflow: hidden;"
     title="&nbsp;&nbsp;VIN码位置图片"
     data-options="iconCls:'icon-standard-folder-page',buttons:'#dlg-add-mes-vin-pic',closed:true,resizable:false,modal:true,closable:true">

    <div id="page">
        <div id="pageContent1">

            <div id="imgContainer">
                <img id="imageFullScreen"/>
            </div>
            <div id="positionButtonDiv">
                <p>缩放 :
                    <span>
							<img id="zoomInButton" class="zoomButton" src="__PUBLIC__/js/smartJQueryZoom-master/example/assets/zoomIn.png" title="zoom in" alt="zoom in" />
							<img id="zoomOutButton" class="zoomButton" src="__PUBLIC__/js/smartJQueryZoom-master/example/assets/zoomOut.png" title="zoom out" alt="zoom out" />
						</span>
                </p>
                <p>
						<span class="positionButtonSpan">
							<map name="positionMap" class="positionMapClass">
								<area id="topPositionMap" shape="rect" coords="20,0,40,20" title="move up" alt="move up"/>
								<area id="leftPositionMap" shape="rect" coords="0,20,20,40" title="move left" alt="move left"/>
								<area id="rightPositionMap" shape="rect" coords="40,20,60,40" title="move right" alt="move right"/>
								<area id="bottomPositionMap" shape="rect" coords="20,40,40,60" title="move bottom" alt="move bottom"/>
							</map>
							<img src="__PUBLIC__/js/smartJQueryZoom-master/example/assets/position.png" usemap="#positionMap" />
						</span>
                </p>
            </div>
        </div>
    </div>

</div>
<div id="dlg-add-mes-vin-pic">
    <div class="tool_tip" id="">
        点击右键可以下载图片进行查看！！ <span id="vinpicinfo"></span>
    </div>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="signvinpic()">签收</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'"
       onclick="javascript:$('#showpicvin').dialog('close')">取消</a>
</div>
<script>
    $(document).ready(function() {

        $('#imageFullScreen').smartZoom({'containerClass':'zoomableContainer','maxScale':10});

        $('#topPositionMap,#leftPositionMap,#rightPositionMap,#bottomPositionMap').bind("click", moveButtonClickHandler);

        $('#zoomInButton,#zoomOutButton').bind("click", zoomButtonClickHandler);



        function zoomButtonClickHandler(e){

            var scaleToAdd = 5;

            if(e.target.id == 'zoomOutButton')

                scaleToAdd = -scaleToAdd;

            $('#imageFullScreen').smartZoom('zoom', scaleToAdd);

        }

        function moveButtonClickHandler(e){

            var pixelsToMoveOnX = 0;

            var pixelsToMoveOnY = 0;



            switch(e.target.id){

                case "leftPositionMap":

                    pixelsToMoveOnX = 50;

                    break;

                case "rightPositionMap":

                    pixelsToMoveOnX = -50;

                    break;

                case "topPositionMap":

                    pixelsToMoveOnY = 50;

                    break;

                case "bottomPositionMap":

                    pixelsToMoveOnY = -50;

                    break;

            }

            $('#imageFullScreen').smartZoom('pan', pixelsToMoveOnX, pixelsToMoveOnY);

        }

    });

    $('#cjtp-dg').datagrid({
        queryParams: {
            cjh: ''
        },
        url : '__APP__/Home/Vinpic/cjtpdata',
        toolbar : '#tool-cjtp',
        pagination : false,
        fit : true,
        width : function() {
            return document.body.clientWidth * 0.9
        },
        nowrap : true,//
        collapsible : true,
        fitColumns : false,
        autoRowHeight : true,
        striped : true,//交替行
        singleSelect : true,//只允许选择一行
        rownumbers : true,
        border : false,
        sortName : '_id',
        sortOrder : 'desc',//倒序排列
        remoteSort : false,
        // pageSize : 50,
        method : "post",
        // pageList : [ 20, 40, 50, 100, 200,500 ],
        columns : [ [
            {
                field : '_id',
                checkbox : true
            },{
                field : 'cjh',
                title : '图号',
                width : 60,
            },{
                field : 'version',
                title : '版本号',
                width : 110,
                align : 'left'

            },{
                field : 'savepath',
                title : 'savepath',
                hidden:true
            }

        ] ],
        onDblClickRow: function (rowIndex, rowData) {

        },
        onSelect:function(index,row){

        },
        rowStyler: function(index,row){

        }
    });
</script>

